<!-- 余额明细 -->
<template>
  <van-nav-bar
    :title="$t('wallet.balance')"
    left-arrow
    @click-left="router.back()"
  />

  <div class="app-border balan-top">
    <div class="balan-Inte" @click="onShow">
      {{ flag.name || $t("wallet.balanTrans") }}
      <img src="@/assets/images/draw.png" alt="" />
    </div>
    <div class="balan-convert">
      <span>{{ flag.text }}</span>
      <span class="balan-num">
        <span v-if="flag.type == 1"> {{ $t("moneyIcon") }}</span>
        {{ flag.all }}
      </span>
    </div>
  </div>

  <table class="app-pad table balance">
    <tr class="table-th">
      <th v-for="item in titleList" :key="item">{{ $t(`wallet.${item}`) }}</th>
    </tr>
    <tr v-for="(item, index) in nums" :key="index" class="table-tr">
      <td>{{ flag.type == 2 ? point.numberEmail(item.des) : item.des }}</td>
      <td>{{ item.date }}</td>
      <td>{{ $t("moneyIcon") }}{{ item.money }}</td>
      <!-- <span :class="{ 'fail': index % 3 == 0, 'success': index % 3 == 1 }" v-if="ikey == 'type'">{{ item }}</span>
                    <span v-else>{{ item }}</span> -->
    </tr>
  </table>

  <Empty :description="$t('wallet.noHistory')" v-if="!nums.length"></Empty>

  <van-action-sheet
    v-model:show="flag.show"
    :actions="flag.list"
    @select="onSelect"
    :title="$t('wallet.balanceChoose')"
    :cancel-text="$t('cancel')"
  />
</template>
<script setup>
import Empty from "@/components/Empty";
import { reactive, ref } from "@vue/reactivity";
import { useRouter, useRoute } from "vue-router";
import { useI18n } from "vue-i18n";
import { onMounted } from "vue";
import { transactionDetail } from "@/api/card";
import usePoint from "@/hooks/usePoint.js";
const point = usePoint();

const { t } = useI18n();
const router = useRouter();
const route = useRoute();

const titleList = ref([]);
const nums = ref([]);
const flag = reactive({
  name: "",
  type: 1,
  show: false,
  name: "",
  text: "",
  list: [
    // { name: t('wallet.drawAll') },
    // 1 余额明细（核销） 2 返佣 3 积分 4 提现
    {
      type: 1,
      text: t("wallet.drawNum"),
      name: t("wallet.balanTrans"),
      th: ["tranType", "tranTime", "tranMoney"], // 提现日期，金额，状态
    }, // 交易
    {
      type: 2,
      text: t("wallet.inviteNum"),
      name: t("wallet.balanRebate"),
      th: ["newPhone", "balanceDate", "balanceMoney"],
    }, // 返佣
    {
      type: 3,
      text: t("wallet.integralNum"),
      name: t("wallet.balanInt"),
      th: ["balanceIntegral", "balanceDate", "exchangeMoney"],
    }, // 积分
  ],
  all: 0,
});

// 获取列表
function getList(type = 1) {
  transactionDetail(type).then((ret) => {
    console.log("获取到列表结果", ret);
    if (ret.code != 200) return;
    nums.value = ret.data;
    let all = 0;
    ret.data.map((v) => {
      all += v.money;
    });
    flag.all = all;
  });
}

function onShow() {
  flag.show = !flag.show;
}
function onSelect(e, index) {
  flag.name = e.name;
  flag.text = e.text;
  flag.type = e.type;
  getList(e.type);
  titleList.value = e.th;
  if (index == 100) return;
  onShow();
}
onMounted(() => {
  let { type = 1 } = route.query;
  let index = flag.list.findIndex((v) => v.type == type);
  onSelect(flag.list[index], 100);
});
</script>
<style lang="less">
.balance {
  text-align: left;
  margin-top: 5px;
  .success {
    color: #e50000;
  }
  .fail {
    color: #17c600;
  }
}
.draw-right {
  font-size: 12px;
  font-weight: 500;
}
.balan-Inte {
  img {
    vertical-align: middle;
    width: 6px;
    margin-left: 3px;
  }
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
}
.balan-top {
  padding: 20px 15px;
}
.balan-convert {
  font-size: 12px;
}
.balan-num {
  color: red;
  margin-left: 5px;
}
</style>
